<template>
  <div class="classArrangement-container">
    <el-row :gutter="16">
      <el-col :span="12">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>专业班级编排</span>
          </div>
          <div>
            <el-form :inline="true" class="arrangeForm">
            <el-row type="flex" :gutter="32" justify="space-between">
              <el-col :span="12">
                <el-form-item>
                  <label style="display: block">选择专业</label>
                  <el-select placeholder="选择专业" v-model="arrangeForm.majorId">
                    <el-option
                        v-for="item in majorList"
                        :key="item.majorId"
                        :label="item.majorName"
                        :value="item.majorId"
                        >
                    </el-option>
                  </el-select>
                  <div style="height: 38px">
                    <el-checkbox v-model="checked">同步生成学号</el-checkbox>
                  </div>
                </el-form-item>
                <el-row type="flex" justify="space-between">
                  <el-col :span="24">
                    <el-button type="primary" style="width: 100%"
                               @click="arrange">
                      <span v-if="!loading">分配班级及学号</span>
                      <span v-else>生成中...</span>
                    </el-button>
                  </el-col>
                </el-row>
              </el-col>
              <el-col :span="12">
                <el-form-item>
                  <label style="display: block">选择班级</label>
                  <el-select placeholder="选择班级" v-model="arrangeForm.classId">
                    <el-option
                        v-for="item in classList"
                        :key="item.id"
                        :label="item.classId"
                        :value="item.classId"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <div style="height: 38px"></div>
                <el-row type="flex" justify="space-between">
                  <el-col :span="24">
                    <el-button type="primary" style="width: 100%"
                               @click="arrangeByClass">
                      <span v-if="!loading2">生成学号</span>
                      <span v-else>生成中...</span>
                    </el-button>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
            </el-form>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>班级列表</span>
          </div>
          <div>
            <el-table
                :data="majorAndClassList"
                style="width: 100%;margin-bottom: 20px;"
                row-key="majorId"
                :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
            >
              <el-table-column type="index" sortable label="序号" width="72px"></el-table-column>
              <el-table-column prop="majorName" sortable label="专业名称"></el-table-column>
              <el-table-column prop="classId" sortable label="班级号"></el-table-column>
              <el-table-column prop="numberOfStudents" label="每班人数" width="120"></el-table-column>
            </el-table>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>

</template>

<script>
export default {
  name: "index",
  data() {
    return {
      majorList: [],
      classList: [],
      majorAndClassList: [],
      arrangeForm: {
        majorId:null,
        classId: null
      },
      checked: false,
      numClass: '',
      loading: false,
      loading2: false,
    }
  },
  created() {
    this.fetchData()
    this.majorAndClass()
    this.classAll()
  },
  methods: {
    async fetchData() {
      const {data : res} = await this.$http.get('getMajorInfoAll')
      // console.log(res)
      this.majorList = res.data
    },
    async majorAndClass() {
      const {data : res} = await this.$http.get('majorAndClass')
      // console.log(res)
      this.majorAndClassList = res.data
    },
    async classAll() {
      // console.log(val)
      const {data : res} = await this.$http.get('classAll')
      // console.log(res.data)
      this.classList = res.data
    },
    async arrange() {
      if (this.arrangeForm.majorId == null) {
        return this.$message.error('请先选择专业')
      }
      this.loading = true
      const {data : res} = await this.$http.get('distClass?majorId=' + this.arrangeForm.majorId + '&checked=' + this.checked)
      if (res.code != 200) return this.$message.error('请先添加班级')
      this.loading = false
      this.$message.success('更新成功')
    },
    async arrangeByClass() {
      // console.log(this.arrangeForm.classId)
      if (this.arrangeForm.classId == null) {
        return this.$message.error('请先选择班级')
      }
      this.loading2 = true
      const {data : res} = await this.$http.get('generateStuIdByClass?classId=' + this.arrangeForm.classId)

      if (res.code != 200) {
        this.loading2 = false
        return this.$message.error('班级下无学生，请先分配学生')
      }
      this.loading2 = false
      this.$message.success('学号生成成功')
    }
  }
}
</script>

<style lang="less" scoped>

.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}


.classArrangement-container {
  width: 98%;
  //background: white;
  padding: 12px 16px 12px 16px;
}
.arrangeForm {
  //display: flex;
  //justify-content: space-around;
  //align-content: space-around;
}
.box-card {
  margin-bottom: 16px;
}



</style>
